<template>
  <div class="TabBar">
    <ul>
      <li
          v-for="(item, index) in routerList"
          :key="index"
          @click="switchTab(item.path)"
      >
        <i :class="$route.path === item.path ? item.selected:item.default"></i>
        <span :class="$route.path === item.path ? 'selected' : ''" >{{item.title}}</span>
      </li>
    </ul>
  </div>
</template>

<script setup>
     import router from "@/router";

     let routerList = [
        {
          title: '首页',
          path: '/HomeView',
          default:'iconfont icon-31shouye',
          selected:'iconfont icon-31shouyexuanzhong'
        },
        {
          title: '发现',
          path: '/FindInfo',
          default:'iconfont icon-zhinanzhen',
          selected:'iconfont icon-zhinanzhen1'
        },
        {
          title: '订单',
          path: '/OrderInfo',
          default:'iconfont icon-24gl-fileText',
          selected:'iconfont icon-24gf-fileText'
        },
        {
          title: '我的',
          path: '/MyInfo',
          default:'iconfont icon-31wode',
          selected:'iconfont icon-31wodexuanzhong'
        }
      ]
     let switchTab = (path)=> {
       router.push(path)
     }
</script>

<style scoped>
.TabBar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 999;
  background-color: #ffffff;
  border-top-width: thin;
  border-top-style: solid;
  box-sizing: border-box;
}
.TabBar ul {border-width: 1px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  list-style: none;
  padding: 0;
}
.TabBar ul li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-top: 0;

}
.TabBar ul li span {
  font-size: 20px;
}
.TabBar ul li i {
  font-size: 30px;
}
.selected {
  font-size: 20px;
  font-weight: bold;
}

</style>
